﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ManagementArticle.ascx.cs" Inherits="KhoaLuan.MainSys.Controls.ManagementArticle" %>
<script>
    var listarticel = [
        {
            "id": 1,
            "title": "hehehe",
            "createby": "ngocnam",
            "createdate": "10-29-2014",
            "editby": "ngocnam",
            "editdate": "10-29-2014",
            "active": true,
        },
        {
            "id": 2,
            "title": "hehehe",
            "createby": "ngocnam",
            "createdate": "10-29-2014",
            "editby": "ngocnam",
            "editdate": "10-29-2014",
            "active": false,
        }

    ];

    function CreateCell(text, id) {
        var td = $('<td>').attr("dataid", id).text(text);
        return td;
    }

    function CreateCheckBox(id) {
        var label = $('<label class="checkbox">');
        var input = $('<input type="checkbox" name="checkbox">');
        input.attr('dataid', id);
        input.attr('checktype', "selectarticle");
        label.append(input);
        var i = $('<i>');
        label.append(i);
        return label;
    }

    function CreateToggle(id, checked) {
        debugger;
        var idtoggle = "onoffswitch" + id;
        var span = $('<span class="onoffswitch">');
        var input = $('<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox">');
        input.attr('dataid', id);
        input.attr('id', idtoggle);
        if (checked)
            input.attr("checked", "checked");
        input.click(function () {
            var dataid = $(this).attr('dataid');
            var checked = this.checked;
            $.ajax({
                type: "POST",
                url: "/ProcessAJAX/AJAXArticle.aspx/ActiveBaiViet",
                data: JSON.stringify(
                            {
                                idbaiviet: parseInt(dataid),
                                active: checked
                            }),
                contentType: "application/json",
                dataType: "text",
                success: function (response) {
                    alert("true");
                    debugger;
                },

                failure: function (response) {
                    alert("false");
                }
            });
        });
        var label = $('<label class="onoffswitch-label">');
        label.attr('for', idtoggle);
        var span1 = $('<span class="onoffswitch-inner" data-swchon-text="YES" data-swchoff-text="NO">');
        label.append(span1);
        var span2 = $('<span class="onoffswitch-switch">');
        label.append(span2);
        span.append(input);
        span.append(label);
        return span;
    }

    function confirm(title, message, titlebuttondelete, titlebuttoncancel, callback) {
        var confirmModal =
          $('<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable" tabindex="-1" role="dialog" aria-describedby="dialog_simple" aria-labelledby="ui-id-22" style="height: auto; width: 600px;display: table-cell; vertical-align: middle;">' +
              '<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">' +
                '<span id="ui-id-22" class="ui-dialog-title"><div class="widget-header"><h4><i class="fa fa-warning"></i> ' + title + '</h4></div></span></div>' +
                '<div id="dialog_simple" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; max-height: none; height: auto;"><p>' + message + '</p></div>' +
                '<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><label class="btn btn-success" style="width:100px" id="okButton">' + titlebuttondelete + '</label><label  id="cancelButton" class="btn btn-default" style="margin-left:10px; width:100px">' + titlebuttoncancel + '</label></div></div>' +
            '</div>');
        confirmModal.find('#okButton').click(function (event) {
            callback();
            confirmModal.modal('hide');
        });
        confirmModal.find('#cancelButton').click(function (event) {
            confirmModal.modal('hide');
        });
        confirmModal.modal('show');
    };


    function CreateButtonAction(id, icon, title) {
        var label = $('<label class="btn btn-xs btn-default" style="margin-right:5px;" data-original-title="' + title + '" >');
        var iconbutton = $('<i class="fa ">');
        iconbutton.addClass(icon);
        label.append(iconbutton);
        label.attr('dataid', id);
        return label;
    }


    function LoadTable(list) {
        var table = $('#tablearticle > tbody').empty();
        for (var i = 0; i < list.length; i++) {
            var tr = $('<tr>');
            tr.append($('<td>').append(CreateCheckBox(list[i].id)));
            var td = CreateCell(list[i].id, list[i].id);
            tr.append(td);
            var td = CreateCell(list[i].title, list[i].id);
            tr.append(td);
            var td = CreateCell(list[i].createby, list[i].id);
            tr.append(td);
            var td = CreateCell(list[i].createdate, list[i].id);
            tr.append(td);
            var td = CreateCell(list[i].editby, list[i].id);
            tr.append(td);
            var td = CreateCell(list[i].editdate, list[i].id);
            tr.append(td);
            var td = $('<td>').append(CreateToggle(list[i].id, list[i].active));
            tr.append(td);
            var td = CreateCell("", list[i].id);
            var buttondel = CreateButtonAction(list[i].id, "fa-times", "Xóa Bài Viết");
            buttondel.click(function () {
                var listid = [parseInt($(this).attr('dataid'))];
                var delfunction = function () {
                    $.ajax({
                        type: "POST",
                        url: "/ProcessAJAX/AJAXArticle.aspx/XoaBai",
                        data: JSON.stringify(
                                    {
                                        listid: listid
                                    }),
                        contentType: "application/json",
                        dataType: "text",
                        success: function (response) {
                            alert("true");
                            debugger;
                        },

                        failure: function (response) {
                            alert("false");
                        }
                    });

                };
                confirm("Xác nhận", "Bạn có muốn xóa file đã chọn", "Xóa", "Không", delfunction);
            });
            var buttonedit = CreateButtonAction(list[i].id, "fa-pencil", "Sửa Bài Viết");
            buttonedit.click(function () {
                location.replace("/MainSys/Articles/AddNew.aspx?ArticleID=" + $(this).attr('dataid'));
            });
            td.append(buttondel);
            td.append(buttonedit);
            tr.append(td);
            table.append(tr);
        }
    }

    function DeleteSelected() {
        var listcheckbox = $('input[checktype="selectarticle"]:checked');
        if (listcheckbox.length == 0) {
            alert("Vui lòng chọn bài viết muốn xóa");
        }
        else {
            var listid = [];
            for (var i = 0; i < listcheckbox.length; i++)
                listid.push(parseInt($(listcheckbox[i]).attr('dataid')));
            var deleteselected = function () {
                $.ajax({
                    type: "POST",
                    url: "/ProcessAJAX/AJAXArticle.aspx/XoaBai",
                    data: JSON.stringify(
                                {
                                    listid: listid
                                }),
                    contentType: "application/json",
                    dataType: "text",
                    success: function (response) {
                        alert("true");
                        debugger;
                    },

                    failure: function (response) {
                        alert("false");
                    }
                });

            }
            confirm("Xác Nhận", "Bạn có muốn xóa các bài viết đã chọn không", "Xóa", "Không", deleteselected);
        }

    }

    $(document).ready(function () {
        LoadTable(listarticel);

        $('#ckbCheckAll').click(function () {
            var listcheckbox = $('input[checktype="selectarticle"]');
            for (var i = 0; i < listcheckbox.length; i++) {
                listcheckbox[i].checked = this.checked;
            }
        });

    });
</script>
<div class="smart-form">
    <div>
        <label class="btn btn-default" onclick="DeleteSelected()"><i class="fa fa-times"></i>Xóa Lựa Chọn</label>
    </div>
    <table class="table table-bordered" id="tablearticle">
        <thead>
            <tr>
                <th>
                    <label class="checkbox">
                        <input type="checkbox" name="checkbox" id="ckbCheckAll">
                        <i></i>
                    </label>
                </th>
                <th>PostID</th>
                <th>Title</th>
                <th>Create By</th>
                <th>Create Date</th>
                <th>Edit By</th>
                <th>Edit Date</th>
                <th>Active</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
